<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>色彩心理深度分析系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#EC4899',
                        neutral: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .color-card {
                @apply w-10 h-10 rounded-full cursor-pointer transition-all duration-300 hover:scale-110 hover:shadow-lg relative overflow-hidden;
            }
            .color-card.selected {
                @apply ring-4 ring-primary scale-110 shadow-lg;
            }
            .color-card.selected::after {
                content: "✓";
                @apply absolute inset-0 flex items-center justify-center text-white font-bold text-lg bg-black/30;
            }
            .analysis-card {
                @apply bg-white rounded-xl shadow-md p-6 transition-all duration-500 opacity-0 transform translate-y-4;
            }
            .analysis-card.active {
                @apply opacity-100 translate-y-0;
            }
            .color-tooltip {
                @apply absolute -top-10 left-1/2 transform -translate-x-1/2 bg-neutral text-white text-xs py-1 px-2 rounded whitespace-nowrap opacity-0 transition-opacity duration-300 pointer-events-none;
            }
            .color-card:hover .color-tooltip {
                @apply opacity-100;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-light to-gray-100 min-h-screen font-sans text-neutral">
    <!-- 顶部导航 -->
    <header class="bg-white/80 backdrop-blur-md shadow-sm fixed top-0 left-0 right-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <h1 class="text-2xl font-bold text-primary flex items-center">
                <i class="fa fa-paint-brush mr-2"></i>色彩心理分析
            </h1>
            <div class="flex items-center space-x-4">
                <button id="helpBtn" class="text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-question-circle mr-1"></i>帮助
                </button>
                <button id="resetBtn" class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-lg transition-colors">
                    <i class="fa fa-refresh mr-1"></i>重置
                </button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
        <!-- 介绍区 -->
        <section class="text-center mb-12 max-w-3xl mx-auto">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-neutral">色彩潜意识深度解析</h2>
            <p class="text-gray-600 mb-6">选择你最有感觉的3个色彩，系统将结合心理学、色彩学、家族系统排列等多维度为你分析</p>
            <div class="inline-flex items-center px-4 py-2 bg-primary/10 text-primary rounded-full text-sm">
                <i class="fa fa-info-circle mr-2"></i>基于43种色号与多学科交叉分析模型
            </div>
        </section>

        <!-- 色号选择区 -->
        <section class="mb-16">
            <h3 class="text-xl font-semibold mb-6 text-center">请选择3个你最有共鸣的色彩（按第一直觉）</h3>
            <div id="colorPalette" class="grid grid-cols-5 sm:grid-cols-7 md:grid-cols-10 lg:grid-cols-14 gap-3 mb-6">
                <!-- 43个色号将通过JS动态生成 -->
            </div>
            <div id="selectedColors" class="flex flex-wrap justify-center gap-4 mt-8">
                <p class="text-gray-500 italic" id="selectionPrompt">已选择: 0/3</p>
            </div>
            <div class="text-center mt-8">
                <button id="analyzeBtn" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg font-medium transition-all duration-300 opacity-50 cursor-not-allowed transform hover:scale-105">
                    开始深度分析
                </button>
            </div>
        </section>

        <!-- 分析结果区 -->
        <section id="analysisResults" class="hidden">
            <div class="text-center mb-10">
                <h3 class="text-2xl font-bold mb-2">你的色彩心理分析报告</h3>
                <p class="text-gray-500">基于你选择的色彩，结合多学科交叉分析</p>
                
                <!-- 已选色彩展示 -->
                <div class="flex justify-center gap-3 mt-6" id="displaySelectedColors">
                    <!-- 会通过JS动态填充 -->
                </div>
            </div>

            <!-- 核心分析卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
                <!-- 性格核心特征 -->
                <div class="analysis-card" style="transition-delay: 100ms">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-3">
                            <i class="fa fa-user text-primary"></i>
                        </div>
                        <h4 class="text-xl font-semibold">性格核心特征</h4>
                    </div>
                    <div id="personalityResult" class="space-y-3 text-gray-700">
                        <!-- 结果将通过JS填充 -->
                    </div>
                </div>

                <!-- 创伤类型分析 -->
                <div class="analysis-card" style="transition-delay: 300ms">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-full bg-secondary/20 flex items-center justify-center mr-3">
                            <i class="fa fa-heart text-secondary"></i>
                        </div>
                        <h4 class="text-xl font-semibold">创伤类型分析</h4>
                    </div>
                    <div id="traumaResult" class="space-y-3 text-gray-700">
                        <!-- 结果将通过JS填充 -->
                    </div>
                </div>

                <!-- 五行健康状况 -->
                <div class="analysis-card" style="transition-delay: 500ms">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                            <i class="fa fa-leaf text-green-600"></i>
                        </div>
                        <h4 class="text-xl font-semibold">五行健康状况</h4>
                    </div>
                    <div id="fiveElementsResult" class="space-y-3 text-gray-700">
                        <!-- 结果将通过JS填充 -->
                    </div>
                </div>
            </div>

            <!-- 多理论交叉分析 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
                <!-- 心理学与色彩学分析 -->
                <div class="analysis-card" style="transition-delay: 700ms">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                            <i class="fa fa-brain text-purple-600"></i>
                        </div>
                        <h4 class="text-xl font-semibold">心理学与色彩学交叉分析</h4>
                    </div>
                    <div id="psychologyResult" class="space-y-3 text-gray-700">
                        <!-- 结果将通过JS填充 -->
                    </div>
                </div>

                <!-- 家族系统与行为学分析 -->
                <div class="analysis-card" style="transition-delay: 900ms">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center mr-3">
                            <i class="fa fa-users text-amber-600"></i>
                        </div>
                        <h4 class="text-xl font-semibold">家族系统与行为学分析</h4>
                    </div>
                    <div id="familySystemResult" class="space-y-3 text-gray-700">
                        <!-- 结果将通过JS填充 -->
                    </div>
                </div>
            </div>

            <!-- NLP与潜意识分析 -->
            <div class="analysis-card mb-12" style="transition-delay: 1000ms">
                <div class="flex items-center mb-4">
                    <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
                        <i class="fa fa-lightbulb-o text-indigo-600"></i>
                    </div>
                    <h4 class="text-xl font-semibold">NLP与潜意识投射分析</h4>
                </div>
                <div id="nlpResult" class="space-y-3 text-gray-700">
                    <!-- 结果将通过JS填充 -->
                </div>
            </div>

            <!-- 综合建议 -->
            <div class="analysis-card" style="transition-delay: 1100ms">
                <div class="flex items-center mb-4">
                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                        <i class="fa fa-lightbulb-o text-blue-600"></i>
                    </div>
                    <h4 class="text-xl font-semibold">综合成长建议</h4>
                </div>
                <div id="suggestionResult" class="space-y-3 text-gray-700">
                    <!-- 结果将通过JS填充 -->
                </div>
            </div>

            <!-- 分享按钮 -->
            <div class="text-center mt-12">
                <button id="shareBtn" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg font-medium transition-all duration-300 transform hover:scale-105">
                    <i class="fa fa-share-alt mr-2"></i>分享我的分析报告
                </button>
            </div>
        </section>
    </main>

    <!-- 帮助弹窗 -->
    <div id="helpModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl max-w-lg w-full mx-4 p-6 shadow-2xl">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold">使用说明</h3>
                <button id="closeHelpBtn" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            <div class="space-y-4 text-gray-700">
                <p>1. 从43个色号中选择3个你第一直觉最有感觉的色彩</p>
                <p>2. 点击"开始深度分析"按钮生成你的专属报告</p>
                <p>3. 系统将结合心理学、色彩学、家族系统排列等多学科理论进行交叉分析</p>
                <p>4. 分析结果包含性格特征、创伤类型、五行健康等多维度解读</p>
            </div>
        </div>
    </div>

    <!-- 分享弹窗 -->
    <div id="shareModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl max-w-md w-full mx-4 p-6 shadow-2xl">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold">分享你的分析报告</h3>
                <button id="closeShareBtn" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            <div class="space-y-4">
                <div class="flex justify-center space-x-6">
                    <button class="w-14 h-14 rounded-full bg-[#1DA1F2]/10 flex items-center justify-center text-[#1DA1F2] hover:bg-[#1DA1F2]/20 transition-colors">
                        <i class="fa fa-twitter text-2xl"></i>
                    </button>
                    <button class="w-14 h-14 rounded-full bg-[#4267B2]/10 flex items-center justify-center text-[#4267B2] hover:bg-[#4267B2]/20 transition-colors">
                        <i class="fa fa-facebook text-2xl"></i>
                    </button>
                    <button class="w-14 h-14 rounded-full bg-[#25D366]/10 flex items-center justify-center text-[#25D366] hover:bg-[#25D366]/20 transition-colors">
                        <i class="fa fa-whatsapp text-2xl"></i>
                    </button>
                    <button class="w-14 h-14 rounded-full bg-[#E1306C]/10 flex items-center justify-center text-[#E1306C] hover:bg-[#E1306C]/20 transition-colors">
                        <i class="fa fa-instagram text-2xl"></i>
                    </button>
                </div>
                <div class="relative">
                    <input type="text" id="shareLink" value="https://color-analysis.example.com/report/xyz123" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50" readonly>
                    <button id="copyLinkBtn" class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary/10 text-primary px-3 py-1 rounded hover:bg-primary/20 transition-colors">
                        复制
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 43个色号的Hex值（用户提供）
        const colorCodes = [
            '#FF0000', '#FFFF00', '#3498DB', '#6A0547', '#90C3D4', 
            '#B83A4B', '#0047AB', '#FFA500', '#C6A03E', '#1E3A8A', 
            '#8B0017', '#D2B48C', '#708090', '#FFC0CB', '#8bc34a', 
            '#FF7F50', '#FF88CC', '#FFFF99', '#FFFFFF', '#000000', 
            '#F5F5DC', '#808000', '#0000FF', '#90BEAB', '#CC00FF', 
            '#2ECC71', '#545454', '#C1C1FF', '#975AB6', '#F4A460', 
            '#6F4E37', '#008080', '#E6C9E8', '#00FFFF', '#FF0055', 
            '#2E8B57', '#C3B091', '#7CFC00', '#8A9B6E', '#00FFCC', 
            '#FF5E00', '#FFD700', '#D3D3D3'
        ];

        // 色彩对应的详细分析数据（基于多学科理论）
        const colorData = {
            '#FF0000': {
                name: '红色',
                personality: ['热情奔放', '行动力强', '充满自信', '富有领导力'],
                trauma: ['可能经历过被否定的经历', '对失败有强烈恐惧', '存在未解决的愤怒情绪'],
                elements: '火',
                health: '注意心血管系统，容易有高血压倾向，需管理愤怒情绪',
                psychology: '红色在潜意识中代表生命力与原始冲动，选择红色表明你渴望被关注并具有强烈的目标导向。',
                familySystem: '在家族系统中，红色常与家族中的权威人物相关联，可能反映你与家族中权威角色的复杂关系。',
                nlp: '红色触发的神经语言模式倾向于直接、果断的沟通方式，有时可能忽略他人感受。'
            },
            '#FFFF00': {
                name: '黄色',
                personality: ['乐观开朗', '创造力强', '好奇心旺盛', '善于表达'],
                trauma: ['可能经历过不被认可的时期', '对被忽视较为敏感', '存在自我价值感波动'],
                elements: '土',
                health: '注意消化系统健康，特别是胃部问题，与焦虑情绪相关',
                psychology: '黄色象征阳光与希望，选择黄色表明你具有积极的人生态度和强烈的自我表达需求。',
                familySystem: '黄色在家族系统中常代表沟通与连接，可能反映你在家族中扮演着沟通桥梁的角色。',
                nlp: '黄色对应的神经语言模式倾向于视觉化思考，善于通过想象创造新的可能性。'
            },
            '#3498DB': {
                name: '亮蓝色',
                personality: ['冷静理性', '善于分析', '值得信赖', '注重细节'],
                trauma: ['可能经历过信任破裂', '对不确定性有焦虑', '存在过度控制倾向'],
                elements: '水',
                health: '注意肾脏和泌尿系统健康，避免过度思虑影响睡眠',
                psychology: '蓝色代表平静与智慧，选择亮蓝色表明你寻求稳定和安全感，具有较强的分析能力。',
                familySystem: '在家族系统中，蓝色常与责任和保护相关，可能反映你在家族中承担了过多责任。',
                nlp: '蓝色触发的神经语言模式倾向于逻辑分析和系统性思考，决策时注重数据和事实。'
            },
            '#6A0547': {
                name: '深紫色',
                personality: ['富有洞察力', '直觉敏锐', '追求精神层面满足', '具有神秘感'],
                trauma: ['可能经历过精神层面的挫折', '对现实有疏离感', '存在未被理解的孤独'],
                elements: '火',
                health: '注意神经系统健康，避免过度思考和精神疲劳',
                psychology: '深紫色象征灵性与转化，选择深紫色表明你具有丰富的内心世界和强烈的自我探索欲望。',
                familySystem: '在家族系统中，紫色常与家族中的"特殊成员"相关，可能你在家族中感到与众不同。',
                nlp: '深紫色对应的神经语言模式倾向于抽象思考和隐喻理解，善于捕捉事物背后的深层意义。'
            },
            '#90C3D4': {
                name: '淡蓝色',
                personality: ['温和友善', '适应性强', '善解人意', '追求和谐'],
                trauma: ['可能经历过冲突环境', '对紧张关系敏感', '存在讨好倾向'],
                elements: '水',
                health: '注意甲状腺和呼吸系统，与情绪压抑相关',
                psychology: '淡蓝色代表平静与接纳，选择淡蓝色表明你重视人际关系和谐，具有较强的同理心。',
                familySystem: '在家族系统中，淡蓝色常代表调解者角色，可能你在家族中经常扮演化解冲突的角色。',
                nlp: '淡蓝色触发的神经语言模式倾向于感受性思考，决策时注重人际关系和情感因素。'
            },
            '#B83A4B': {
                name: '深红色',
                personality: ['情感丰富', '坚定执着', '有强烈的正义感', '忠诚可靠'],
                trauma: ['可能经历过背叛', '对失去有恐惧', '存在情感表达障碍'],
                elements: '火',
                health: '注意循环系统和心脏健康，避免情感压抑',
                psychology: '深红色象征强烈的情感与奉献，选择深红色表明你对情感关系投入深刻，重视忠诚与承诺。',
                familySystem: '在家族系统中，深红色常与家族中的牺牲者相关，可能你的家族中有未被承认的牺牲。',
                nlp: '深红色对应的神经语言模式倾向于情感化表达，决策时重视价值观和情感连接。'
            },
            '#0047AB': {
                name: '深蓝色',
                personality: ['稳重可靠', '有责任感', '深思熟虑', '坚守原则'],
                trauma: ['可能经历过重大责任压力', '对失败有恐惧', '存在完美主义倾向'],
                elements: '水',
                health: '注意心理健康，避免过度压力导致焦虑和抑郁',
                psychology: '深蓝色代表权威与稳定，选择深蓝色表明你重视秩序和结构，具有较强的责任感。',
                familySystem: '在家族系统中，深蓝色常与家族中的权威人物相关，可能你继承了家族中的领导角色。',
                nlp: '深蓝色触发的神经语言模式倾向于结构化思考，决策时注重规则和长期后果。'
            },
            '#FFA500': {
                name: '橙色',
                personality: ['活力充沛', '社交能力强', '乐观积极', '富有感染力'],
                trauma: ['可能经历过被排斥的时期', '对孤独敏感', '存在表现焦虑'],
                elements: '火',
                health: '注意消化系统和免疫系统，与社交压力相关',
                psychology: '橙色象征活力与社交，选择橙色表明你享受人际互动，具有较强的沟通能力和感染力。',
                familySystem: '在家族系统中，橙色常代表连接与传承，可能你在家族中扮演着维系关系的角色。',
                nlp: '橙色对应的神经语言模式倾向于外向表达，善于通过情感连接影响他人。'
            },
            '#C6A03E': {
                name: '古铜色',
                personality: ['务实可靠', '坚韧不拔', '有耐心', '重视传统'],
                trauma: ['可能经历过资源匮乏', '对未来有不确定性恐惧', '存在安全感缺失'],
                elements: '土',
                health: '注意骨骼和皮肤健康，与长期压力相关',
                psychology: '古铜色象征大地与稳定，选择古铜色表明你重视实际成果和传统价值，具有较强的忍耐力。',
                familySystem: '在家族系统中，古铜色常与家族的根基和传承相关，可能你对家族历史有强烈的连接感。',
                nlp: '古铜色对应的神经语言模式倾向于实际思考，决策时注重经验和实用性。'
            },
            '#1E3A8A': {
                name: '藏青色',
                personality: ['深思熟虑', '谨慎稳重', '有远见', '坚持原则'],
                trauma: ['可能经历过重大决策失误', '对未知有恐惧', '存在过度谨慎倾向'],
                elements: '水',
                health: '注意肾脏和内分泌系统，与长期思虑相关',
                psychology: '藏青色代表深度与智慧，选择藏青色表明你具有战略思维和长远眼光，重视规划与准备。',
                familySystem: '在家族系统中，藏青色常与家族中的决策者相关，可能你在家族中承担着重要决策角色。',
                nlp: '藏青色触发的神经语言模式倾向于系统性思考，善于从复杂信息中提取关键要素。'
            },
            '#8B0017': {
                name: '暗红色',
                personality: ['情感深沉', '坚定执着', '有强烈的使命感', '重视忠诚'],
                trauma: ['可能经历过重大损失', '对背叛极度敏感', '存在未愈合的情感创伤'],
                elements: '火',
                health: '注意心血管系统和心理健康，与未释放的悲伤相关',
                psychology: '暗红色象征深刻的情感与持久的记忆，选择暗红色表明你对情感关系有深度投入，难以忘怀过去的经历。',
                familySystem: '在家族系统中，暗红色常与家族中的未解决创伤相关，可能你的家族中有被遗忘的伤痛。',
                nlp: '暗红色对应的神经语言模式倾向于情感记忆，决策时深受过去经验影响。'
            },
            '#D2B48C': {
                name: '棕褐色',
                personality: ['务实可靠', '温和友善', '有耐心', '重视安全感'],
                trauma: ['可能经历过不稳定的环境', '对变化有焦虑', '存在控制欲倾向'],
                elements: '土',
                health: '注意消化系统和皮肤健康，与情绪压抑相关',
                psychology: '棕褐色代表大地与稳定，选择棕褐色表明你重视安全感和实际需求，具有较强的适应性。',
                familySystem: '在家族系统中，棕褐色常与家族的根基相关，可能你对家庭和传统有强烈的归属感。',
                nlp: '棕褐色对应的神经语言模式倾向于感官体验，决策时注重实际感受和安全感。'
            },
            '#708090': {
                name: '石板灰',
                personality: ['理性客观', '稳重可靠', '有分寸', '善于平衡'],
                trauma: ['可能经历过极端情绪环境', '对冲突敏感', '存在情感隔离倾向'],
                elements: '土',
                health: '注意神经系统和心理健康，与情感压抑相关',
                psychology: '石板灰象征中立与平衡，选择石板灰表明你善于在复杂情境中保持客观，重视和谐与稳定。',
                familySystem: '在家族系统中，石板灰常代表调解者角色，可能你在家族中经常扮演平衡各方利益的角色。',
                nlp: '石板灰对应的神经语言模式倾向于理性分析，决策时注重平衡和客观标准。'
            },
            '#FFC0CB': {
                name: '粉红色',
                personality: ['温柔体贴', '富有同情心', '浪漫感性', '重视人际关系'],
                trauma: ['可能经历过情感忽视', '对拒绝敏感', '存在自我价值感不足'],
                elements: '火',
                health: '注意心脏和情感健康，避免过度付出导致疲劳',
                psychology: '粉红色象征爱与关怀，选择粉红色表明你重视情感连接和人际关系，具有较强的同理心。',
                familySystem: '在家族系统中，粉红色常与关爱和滋养相关，可能你在家族中扮演着照顾者的角色。',
                nlp: '粉红色对应的神经语言模式倾向于情感连接，决策时重视人际关系和情感需求。'
            },
            '#8bc34a': {
                name: '青绿色',
                personality: ['充满活力', '乐观向上', '适应性强', '富有创造力'],
                trauma: ['可能经历过成长受限', '对停滞不前敏感', '存在自我表达障碍'],
                elements: '木',
                health: '注意肝脏和胆囊健康，与情绪压抑相关',
                psychology: '青绿色象征生长与活力，选择青绿色表明你具有强烈的成长欲望和适应能力，重视个人发展。',
                familySystem: '在家族系统中，青绿色常与新的开始相关，可能你正在家族中开创一条新的道路。',
                nlp: '青绿色对应的神经语言模式倾向于成长性思考，善于从挑战中寻找机会。'
            },
            '#FF7F50': {
                name: '珊瑚色',
                personality: ['热情友好', '活泼开朗', '善于社交', '富有魅力'],
                trauma: ['可能经历过社交排斥', '对被忽视敏感', '存在表现焦虑'],
                elements: '火',
                health: '注意循环系统和皮肤健康，与社交压力相关',
                psychology: '珊瑚色象征温暖与活力，选择珊瑚色表明你享受人际互动，具有较强的沟通能力和亲和力。',
                familySystem: '在家族系统中，珊瑚色常与连接和接纳相关，可能你在家族中扮演着促进团结的角色。',
                nlp: '珊瑚色对应的神经语言模式倾向于情感表达，善于通过温暖和热情建立连接。'
            },
            '#FF88CC': {
                name: '亮粉色',
                personality: ['活泼开朗', '富有创意', '乐观积极', '敢于表达'],
                trauma: ['可能经历过被评判的时期', '对负面评价敏感', '存在自我怀疑'],
                elements: '火',
                health: '注意心理健康和荷尔蒙平衡，与情绪波动相关',
                psychology: '亮粉色象征活力与表达，选择亮粉色表明你具有强烈的自我表达欲望和创造力，不畏惧展现真实的自己。',
                familySystem: '在家族系统中，亮粉色常与独特性相关，可能你在家族中以独特的方式表达自己。',
                nlp: '亮粉色对应的神经语言模式倾向于直觉表达，善于通过创意和情感影响他人。'
            },
            '#FFFF99': {
                name: '淡黄色',
                personality: ['乐观开朗', '积极向上', '充满希望', '善于发现美好'],
                trauma: ['可能经历过悲观环境', '对负面情绪敏感', '存在逃避现实倾向'],
                elements: '土',
                health: '注意消化系统和神经系统，与焦虑相关',
                psychology: '淡黄色象征阳光与希望，选择淡黄色表明你具有积极的人生态度，善于从困境中寻找积极面。',
                familySystem: '在家族系统中，淡黄色常与希望和传承相关，可能你在家族中承载着积极改变的期望。',
                nlp: '淡黄色对应的神经语言模式倾向于积极思考，善于重构负面经历为学习机会。'
            },
            '#FFFFFF': {
                name: '白色',
                personality: ['纯洁正直', '追求完美', '客观公正', '有清晰界限'],
                trauma: ['可能经历过混乱环境', '对不完美敏感', '存在控制欲倾向'],
                elements: '金',
                health: '注意心理健康，避免过度追求完美导致压力',
                psychology: '白色象征纯洁与新开始，选择白色表明你重视清晰和简单，追求完美和纯粹的体验。',
                familySystem: '在家族系统中，白色常与新的开始相关，可能你正在寻求与家族过去和解的方式。',
                nlp: '白色对应的神经语言模式倾向于清晰思考，善于简化复杂信息并建立明确界限。'
            },
            '#000000': {
                name: '黑色',
                personality: ['神秘深沉', '独立自信', '有权威感', '善于隐藏'],
                trauma: ['可能经历过重大创伤', '对暴露脆弱敏感', '存在情感封闭倾向'],
                elements: '水',
                health: '注意心理健康和内分泌系统，与压抑情绪相关',
                psychology: '黑色象征深度与神秘，选择黑色表明你具有复杂的内心世界，重视隐私和独立，可能在情感上有所保留。',
                familySystem: '在家族系统中，黑色常与未被承认的秘密相关，可能你的家族中有未被谈论的话题。',
                nlp: '黑色对应的神经语言模式倾向于深度思考，善于洞察表面之下的真相，但可能隐藏真实感受。'
            },
            '#F5F5DC': {
                name: '米色',
                personality: ['温和友善', '务实可靠', '有耐心', '重视舒适'],
                trauma: ['可能经历过冲突环境', '对紧张关系敏感', '存在逃避冲突倾向'],
                elements: '土',
                health: '注意消化系统和皮肤健康，与情绪压抑相关',
                psychology: '米色象征温暖与舒适，选择米色表明你重视安全感和舒适，具有较强的适应性和包容性。',
                familySystem: '在家族系统中，米色常与家庭和归属感相关，可能你对家庭环境有强烈的依恋。',
                nlp: '米色对应的神经语言模式倾向于感受性思考，决策时注重舒适和和谐。'
            },
            '#808000': {
                name: '橄榄绿',
                personality: ['稳重可靠', '坚韧不拔', '务实能干', '重视安全'],
                trauma: ['可能经历过资源匮乏', '对不确定性敏感', '存在控制欲倾向'],
                elements: '木',
                health: '注意肝脏和免疫系统，与长期压力相关',
                psychology: '橄榄绿象征坚韧与保护，选择橄榄绿表明你具有较强的适应能力和忍耐力，重视安全和稳定。',
                familySystem: '在家族系统中，橄榄绿常与保护者角色相关，可能你在家族中扮演着保护者的角色。',
                nlp: '橄榄绿对应的神经语言模式倾向于实用思考，善于在资源有限的情况下找到解决方案。'
            },
            '#0000FF': {
                name: '纯蓝色',
                personality: ['冷静理性', '聪明智慧', '值得信赖', '有责任感'],
                trauma: ['可能经历过信任破裂', '对失败敏感', '存在过度责任感'],
                elements: '水',
                health: '注意肾脏和心理健康，与过度思虑相关',
                psychology: '纯蓝色象征信任与智慧，选择纯蓝色表明你重视诚实和可靠性，具有较强的分析能力和责任感。',
                familySystem: '在家族系统中，纯蓝色常与责任和信任相关，可能你在家族中被赋予了重要的责任。',
                nlp: '纯蓝色对应的神经语言模式倾向于逻辑思考，决策时注重事实和数据。'
            },
            '#90BEAB': {
                name: '青灰色',
                personality: ['冷静客观', '稳重可靠', '有分寸', '善于平衡'],
                trauma: ['可能经历过极端情绪', '对冲突敏感', '存在情感隔离倾向'],
                elements: '木',
                health: '注意呼吸系统和心理健康，与情感压抑相关',
                psychology: '青灰色象征平衡与和谐，选择青灰色表明你善于在复杂情境中保持平衡，重视客观和理性。',
                familySystem: '在家族系统中，青灰色常与调解者角色相关，可能你在家族中经常调解冲突。',
                nlp: '青灰色对应的神经语言模式倾向于平衡思考，善于整合不同观点并找到中间立场。'
            },
            '#CC00FF': {
                name: '亮紫色',
                personality: ['富有创意', '独特个性', '直觉敏锐', '追求独特'],
                trauma: ['可能经历过被评判', '对 conformity敏感', '存在自我表达障碍'],
                elements: '火',
                health: '注意神经系统和心理健康，与创意压力相关',
                psychology: '亮紫色象征创意与独特，选择亮紫色表明你具有强烈的创意欲望和独特的视角，不畏惧与众不同。',
                familySystem: '在家族系统中，亮紫色常与独特性相关，可能你在家族中以独特的方式表达自己。',
                nlp: '亮紫色对应的神经语言模式倾向于创新思考，善于跳出常规思维框架。'
            },
            '#2ECC71': {
                name: '亮绿色',
                personality: ['充满活力', '乐观向上', '富有希望', '重视成长'],
                trauma: ['可能经历过停滞不前', '对限制敏感', '存在自我实现焦虑'],
                elements: '木',
                health: '注意肝脏和胆囊健康，与成长压力相关',
                psychology: '亮绿色象征生长与希望，选择亮绿色表明你具有强烈的成长欲望和积极的人生态度，重视个人发展。',
                familySystem: '在家族系统中，亮绿色常与新的可能性相关，可能你正在家族中开创新的道路。',
                nlp: '亮绿色对应的神经语言模式倾向于成长性思考，善于从挑战中寻找机会。'
            },
            '#545454': {
                name: '深灰色',
                personality: ['稳重可靠', '理性客观', '有分寸', '善于思考'],
                trauma: ['可能经历过极端情绪', '对冲突敏感', '存在情感隔离倾向'],
                elements: '土',
                health: '注意心理健康和神经系统，与长期压力相关',
                psychology: '深灰色象征深度与稳重，选择深灰色表明你具有较强的思考能力和分寸感，重视理性和客观。',
                familySystem: '在家族系统中，深灰色常与智慧和经验相关，可能你在家族中扮演着顾问的角色。',
                nlp: '深灰色对应的神经语言模式倾向于深度思考，善于分析复杂问题并找到合理解决方案。'
            },
            '#C1C1FF': {
                name: '淡紫色',
                personality: ['温柔体贴', '富有想象力', '直觉敏锐', '重视精神层面'],
                trauma: ['可能经历过现实与理想的冲突', '对粗鄙敏感', '存在逃避现实倾向'],
                elements: '火',
                health: '注意神经系统和心理健康，与想象力相关的压力',
                psychology: '淡紫色象征梦想与直觉，选择淡紫色表明你具有丰富的内心世界和强烈的直觉，重视精神层面的满足。',
                familySystem: '在家族系统中，淡紫色常与灵性和直觉相关，可能你继承了家族中的直觉能力。',
                nlp: '淡紫色对应的神经语言模式倾向于直觉思考，善于通过感受和想象理解世界。'
            },
            '#975AB6': {
                name: '紫褐色',
                personality: ['神秘独特', '富有洞察力', '坚韧不拔', '重视深度'],
                trauma: ['可能经历过不被理解', '对肤浅敏感', '存在孤独感'],
                elements: '火',
                health: '注意神经系统和心理健康，与深度思考相关的疲劳',
                psychology: '紫褐色象征深度与独特，选择紫褐色表明你具有独特的视角和深刻的洞察力，重视深度而非表面。',
                familySystem: '在家族系统中，紫褐色常与独特性和不被理解相关，可能你在家族中感到与众不同。',
                nlp: '紫褐色对应的神经语言模式倾向于深度直觉思考，善于洞察事物的本质和深层意义。'
            },
            '#F4A460': {
                name: '沙棕色',
                personality: ['务实可靠', '温和友善', '有耐心', '重视安全感'],
                trauma: ['可能经历过不稳定环境', '对变化敏感', '存在控制欲倾向'],
                elements: '土',
                health: '注意消化系统和皮肤健康，与安全感相关的压力',
                psychology: '沙棕色象征大地与稳定，选择沙棕色表明你重视安全感和实际需求，具有较强的适应性。',
                familySystem: '在家族系统中，沙棕色常与根基和传统相关，可能你对家族历史有强烈的连接感。',
                nlp: '沙棕色对应的神经语言模式倾向于感官思考，决策时注重实际感受和安全感。'
            },
            '#6F4E37': {
                name: '深棕色',
                personality: ['稳重可靠', '务实能干', '坚韧不拔', '重视传统'],
                trauma: ['可能经历过资源匮乏', '对不确定性敏感', '存在安全感缺失'],
                elements: '土',
                health: '注意消化系统和骨骼健康，与长期压力相关',
                psychology: '深棕色象征大地与稳定，选择深棕色表明你重视传统和实际成果，具有较强的忍耐力和毅力。',
                familySystem: '在家族系统中，深棕色常与家族根基相关，可能你对家族历史和传统有强烈的尊重。',
                nlp: '深棕色对应的神经语言模式倾向于实用思考，决策时注重经验和实际效果。'
            },
            '#008080': {
                name: '青绿色',
                personality: ['平衡和谐', '理性客观', '善于沟通', '重视成长'],
                trauma: ['可能经历过不平衡的环境', '对冲突敏感', '存在完美主义倾向'],
                elements: '木',
                health: '注意肝脏和肾脏健康，与平衡相关的压力',
                psychology: '青绿色象征平衡与和谐，选择青绿色表明你重视平衡和和谐，具有较强的适应能力和沟通能力。',
                familySystem: '在家族系统中，青绿色常与平衡者角色相关，可能你在家族中扮演着平衡各方利益的角色。',
                nlp: '青绿色对应的神经语言模式倾向于系统思考，善于整合不同观点并找到平衡点。'
            },
            '#E6C9E8': {
                name: '淡粉色',
                personality: ['温柔体贴', '敏感细腻', '富有同情心', '重视情感'],
                trauma: ['可能经历过情感忽视', '对拒绝敏感', '存在自我价值感不足'],
                elements: '火',
                health: '注意心脏和情感健康，与情感敏感相关的压力',
                psychology: '淡粉色象征温柔与关怀，选择淡粉色表明你具有强烈的同理心和情感敏感度，重视情感连接。',
                familySystem: '在家族系统中，淡粉色常与关爱和滋养相关，可能你在家族中扮演着照顾者的角色。',
                nlp: '淡粉色对应的神经语言模式倾向于情感思考，决策时注重情感因素和人际关系。'
            },
            '#00FFFF': {
                name: '青色',
                personality: ['创新思维', '理性客观', '善于沟通', '适应性强'],
                trauma: ['可能经历过僵化环境', '对限制敏感', '存在表达障碍'],
                elements: '木',
                health: '注意肝脏和神经系统健康，与创新压力相关',
                psychology: '青色象征创新与沟通，选择青色表明你具有创新思维和良好的沟通能力，适应能力强。',
                familySystem: '在家族系统中，青色常与沟通者角色相关，可能你在家族中扮演着连接不同代际的角色。',
                nlp: '青色对应的神经语言模式倾向于创新思考，善于通过沟通和表达解决问题。'
            },
            '#FF0055': {
                name: '玫红色',
                personality: ['热情奔放', '情感丰富', '敢于表达', '富有魅力'],
                trauma: ['可能经历过情感压抑', '对冷漠敏感', '存在情感表达障碍'],
                elements: '火',
                health: '注意心血管系统和心理健康，与情感波动相关',
                psychology: '玫红色象征热情与表达，选择玫红色表明你具有强烈的情感表达欲望和魅力，不畏惧展现真实的自己。',
                familySystem: '在家族系统中，玫红色常与情感表达相关，可能你在家族中以情感表达能力著称。',
                nlp: '玫红色对应的神经语言模式倾向于情感表达，善于通过情感连接影响他人。'
            },
            '#2E8B57': {
                name: '深绿色',
                personality: ['稳重可靠', '坚韧不拔', '重视成长', '有耐心'],
                trauma: ['可能经历过成长受阻', '对停滞敏感', '存在控制欲倾向'],
                elements: '木',
                health: '注意肝脏和免疫系统，与长期压力相关',
                psychology: '深绿色象征成长与坚韧，选择深绿色表明你具有较强的忍耐力和成长欲望，重视长期发展。',
                familySystem: '在家族系统中，深绿色常与家族的持续发展相关，可能你在家族中承担着延续传统的责任。',
                nlp: '深绿色对应的神经语言模式倾向于长期思考，善于制定和执行长期计划。'
            },
            '#C3B091': {
                name: '棕褐色',
                personality: ['务实可靠', '温和友善', '有耐心', '重视传统'],
                trauma: ['可能经历过变化不定的环境', '对未知敏感', '存在安全感缺失'],
                elements: '土',
                health: '注意消化系统和皮肤健康，与安全感相关的压力',
                psychology: '棕褐色象征传统与稳定，选择棕褐色表明你重视传统和安全感，具有较强的耐心和适应性。',
                familySystem: '在家族系统中，棕褐色常与家族传统相关，可能你对家族历史和传统有强烈的尊重。',
                nlp: '棕褐色对应的神经语言模式倾向于经验思考，决策时注重传统和经验。'
            },
            '#7CFC00': {
                name: '亮绿色',
                personality: ['充满活力', '乐观向上', '富有希望', '重视成长'],
                trauma: ['可能经历过停滞不前', '对限制敏感', '存在自我实现焦虑'],
                elements: '木',
                health: '注意肝脏和胆囊健康，与成长压力相关',
                psychology: '亮绿色象征生长与希望，选择亮绿色表明你具有强烈的成长欲望和积极的人生态度，重视个人发展。',
                familySystem: '在家族系统中，亮绿色常与新的可能性相关，可能你正在家族中开创新的道路。',
                nlp: '亮绿色对应的神经语言模式倾向于成长性思考，善于从挑战中寻找机会。'
            },
            '#8A9B6E': {
                name: '橄榄灰',
                personality: ['稳重可靠', '务实能干', '善于平衡', '有耐心'],
                trauma: ['可能经历过冲突环境', '对极端敏感', '存在逃避冲突倾向'],
                elements: '木',
                health: '注意肝脏和免疫系统，与平衡相关的压力',
                psychology: '橄榄灰象征平衡与实用，选择橄榄灰表明你具有较强的平衡能力和实用思维，重视和谐与稳定。',
                familySystem: '在家族系统中，橄榄灰常与调解者角色相关，可能你在家族中经常调解冲突。',
                nlp: '橄榄灰对应的神经语言模式倾向于平衡思考，善于在不同需求之间找到平衡点。'
            },
            '#00FFCC': {
                name: '青绿色',
                personality: ['创新思维', '平和友善', '善于沟通', '重视和谐'],
                trauma: ['可能经历过冲突环境', '对不和谐敏感', '存在表达障碍'],
                elements: '木',
                health: '注意肝脏和神经系统健康，与和谐相关的压力',
                psychology: '青绿色象征和谐与创新，选择青绿色表明你重视和谐关系和创新思维，具有较强的沟通能力。',
                familySystem: '在家族系统中，青绿色常与和谐促进者角色相关，可能你在家族中致力于促进和谐关系。',
                nlp: '青绿色对应的神经语言模式倾向于和谐思考，善于通过创新方式促进和谐。'
            },
            '#FF5E00': {
                name: '橙红色',
                personality: ['热情奔放', '行动力强', '富有活力', '敢于冒险'],
                trauma: ['可能经历过被限制', '对停滞敏感', '存在冲动控制问题'],
                elements: '火',
                health: '注意心血管系统和消化系统，与冲动相关的压力',
                psychology: '橙红色象征热情与行动，选择橙红色表明你具有强烈的行动力和冒险精神，重视即时体验。',
                familySystem: '在家族系统中，橙红色常与行动者角色相关，可能你在家族中扮演着推动变革的角色。',
                nlp: '橙红色对应的神经语言模式倾向于行动导向思考，善于快速决策并采取行动。'
            },
            '#FFD700': {
                name: '金色',
                personality: ['自信乐观', '有领导力', '重视品质', '富有魅力'],
                trauma: ['可能经历过价值否定', '对失败敏感', '存在完美主义倾向'],
                elements: '金',
                health: '注意心理健康和消化系统，与成就压力相关',
                psychology: '金色象征成功与自信，选择金色表明你具有强烈的成就欲望和自信，重视品质和卓越。',
                familySystem: '在家族系统中，金色常与成就和荣誉相关，可能你在家族中承载着成功的期望。',
                nlp: '金色对应的神经语言模式倾向于成就导向思考，善于设定高目标并努力实现。'
            },
            '#D3D3D3': {
                name: '浅灰色',
                personality: ['理性客观', '中立公正', '有分寸', '善于平衡'],
                trauma: ['可能经历过极端情绪', '对冲突敏感', '存在情感隔离倾向'],
                elements: '土',
                health: '注意心理健康和神经系统，与中立相关的压力',
                psychology: '浅灰色象征中立与平衡，选择浅灰色表明你具有较强的客观思考能力和分寸感，重视平衡与和谐。',
                familySystem: '在家族系统中，浅灰色常与中立者角色相关，可能你在家族中保持中立立场。',
                nlp: '浅灰色对应的神经语言模式倾向于客观思考，善于保持中立并平衡不同观点。'
            }
        };

        // 生成色彩选择面板
        const colorPalette = document.getElementById('colorPalette');
        colorCodes.forEach((color, index) => {
            const colorCard = document.createElement('div');
            colorCard.className = 'color-card';
            colorCard.style.backgroundColor = color;
            colorCard.dataset.color = color;
            colorCard.dataset.index = index + 1; // 色号从1开始
            
            // 添加色号提示
            const tooltip = document.createElement('div');
            tooltip.className = 'color-tooltip';
            tooltip.textContent = `${index + 1}. ${colorData[color]?.name || color}`;
            colorCard.appendChild(tooltip);
            
            colorCard.addEventListener('click', () => selectColor(color));
            colorPalette.appendChild(colorCard);
        });

        // 选择色彩逻辑
        const selectedColors = [];
        const selectedColorsEl = document.getElementById('selectedColors');
        const selectionPrompt = document.getElementById('selectionPrompt');
        const analyzeBtn = document.getElementById('analyzeBtn');

        function selectColor(color) {
            // 检查是否已选择该颜色
            const colorIndex = selectedColors.indexOf(color);
            if (colorIndex > -1) {
                // 取消选择
                selectedColors.splice(colorIndex, 1);
                updateSelectedColors();
                updateColorCards();
                return;
            }
            
            // 限制最多选择3个颜色
            if (selectedColors.length >= 3) {
                return;
            }
            
            // 添加选择
            selectedColors.push(color);
            updateSelectedColors();
            updateColorCards();
            
            // 启用分析按钮
            if (selectedColors.length === 3) {
                analyzeBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                analyzeBtn.classList.add('opacity-100', 'cursor-pointer');
            }
        }

        function updateSelectedColors() {
            // 更新选择计数
            selectionPrompt.textContent = `已选择: ${selectedColors.length}/3`;
            
            // 清除已选颜色显示（保留提示文本）
            while (selectedColorsEl.children.length > 1) {
                selectedColorsEl.removeChild(selectedColorsEl.lastChild);
            }
            
            // 显示已选颜色
            selectedColors.forEach(color => {
                const colorDisplay = document.createElement('div');
                colorDisplay.className = 'w-12 h-12 rounded-full relative';
                colorDisplay.style.backgroundColor = color;
                
                // 添加删除按钮
                const removeBtn = document.createElement('button');
                removeBtn.className = 'absolute -top-2 -right-2 w-6 h-6 rounded-full bg-white text-gray-800 flex items-center justify-center text-xs shadow-md hover:bg-gray-100 transition-colors';
                removeBtn.textContent = '×';
                removeBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const index = selectedColors.indexOf(color);
                    if (index > -1) {
                        selectedColors.splice(index, 1);
                        updateSelectedColors();
                        updateColorCards();
                        analyzeBtn.classList.add('opacity-50', 'cursor-not-allowed');
                        analyzeBtn.classList.remove('opacity-100', 'cursor-pointer');
                    }
                });
                
                colorDisplay.appendChild(removeBtn);
                selectedColorsEl.appendChild(colorDisplay);
            });
        }

        function updateColorCards() {
            // 更新色彩卡片的选中状态
            document.querySelectorAll('.color-card').forEach(card => {
                if (selectedColors.includes(card.dataset.color)) {
                    card.classList.add('selected');
                } else {
                    card.classList.remove('selected');
                }
            });
        }

        // 分析按钮点击事件
        analyzeBtn.addEventListener('click', () => {
            if (selectedColors.length !== 3) return;
            
            // 显示分析结果区域
            const analysisResults = document.getElementById('analysisResults');
            analysisResults.classList.remove('hidden');
            
            // 滚动到分析结果区域
            analysisResults.scrollIntoView({ behavior: 'smooth', block: 'start' });
            
            // 显示已选色彩
            const displaySelectedColors = document.getElementById('displaySelectedColors');
            displaySelectedColors.innerHTML = '';
            selectedColors.forEach(color => {
                const colorDisplay = document.createElement('div');
                colorDisplay.className = 'w-16 h-16 rounded-full shadow-md relative';
                colorDisplay.style.backgroundColor = color;
                
                // 添加颜色名称
                const colorName = document.createElement('div');
                colorName.className = 'absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-xs text-gray-600 whitespace-nowrap';
                colorName.textContent = colorData[color]?.name || color;
                colorDisplay.appendChild(colorName);
                
                displaySelectedColors.appendChild(colorDisplay);
            });
            
            // 生成分析结果
            generateAnalysisResults();
            
            // 激活分析卡片动画
            setTimeout(() => {
                document.querySelectorAll('.analysis-card').forEach(card => {
                    card.classList.add('active');
                });
            }, 100);
        });

        // 生成分析结果
        function generateAnalysisResults() {
            // 收集选中颜色的数据
            const selectedData = selectedColors.map(color => colorData[color]);
            
            // 性格核心特征分析
            const personalityResult = document.getElementById('personalityResult');
            personalityResult.innerHTML = '';
            
            // 合并并去重性格特征
            const personalities = [...new Set(selectedData.flatMap(data => data.personality))];
            personalities.forEach(trait => {
                const item = document.createElement('div');
                item.className = 'flex items-start';
                item.innerHTML = `<i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                                 <span>${trait}</span>`;
                personalityResult.appendChild(item);
            });
            
            // 创伤类型分析
            const traumaResult = document.getElementById('traumaResult');
            traumaResult.innerHTML = '';
            
            // 合并并去重创伤类型
            const traumas = [...new Set(selectedData.flatMap(data => data.trauma))];
            traumas.forEach(trauma => {
                const item = document.createElement('div');
                item.className = 'flex items-start';
                item.innerHTML = `<i class="fa fa-exclamation-circle text-secondary mt-1 mr-2"></i>
                                 <span>${trauma}</span>`;
                traumaResult.appendChild(item);
            });
            
            // 五行健康状况分析
            const fiveElementsResult = document.getElementById('fiveElementsResult');
            fiveElementsResult.innerHTML = '';
            
            // 五行元素统计
            const elementsCount = {};
            selectedData.forEach(data => {
                elementsCount[data.elements] = (elementsCount[data.elements] || 0) + 1;
            });
            
            // 显示五行元素
            Object.entries(elementsCount).forEach(([element, count]) => {
                const item = document.createElement('div');
                item.className = 'flex items-center justify-between';
                item.innerHTML = `<div class="flex items-center">
                                    <i class="fa fa-balance-scale text-green-600 mr-2"></i>
                                    <span>${element}元素</span>
                                 </div>
                                 <span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded-full">
                                    ${count}个色彩
                                 </span>`;
                fiveElementsResult.appendChild(item);
            });
            
            // 健康建议
            const healthAdvices = [...new Set(selectedData.map(data => data.health))];
            healthAdvices.forEach(advice => {
                const item = document.createElement('div');
                item.className = 'flex items-start mt-3';
                item.innerHTML = `<i class="fa fa-heartbeat text-green-600 mt-1 mr-2"></i>
                                 <span>${advice}</span>`;
                fiveElementsResult.appendChild(item);
            });
            
            // 心理学与色彩学分析
            const psychologyResult = document.getElementById('psychologyResult');
            psychologyResult.innerHTML = '';
            
            selectedData.forEach((data, index) => {
                const color = selectedColors[index];
                const item = document.createElement('div');
                item.className = 'mb-4 last:mb-0';
                item.innerHTML = `<div class="flex items-center mb-2">
                                    <div class="w-4 h-4 rounded-full mr-2" style="background-color: ${color}"></div>
                                    <span class="font-medium">${data.name}</span>
                                 </div>
                                 <p class="pl-6 text-sm">${data.psychology}</p>`;
                psychologyResult.appendChild(item);
            });
            
            // 家族系统与行为学分析
            const familySystemResult = document.getElementById('familySystemResult');
            familySystemResult.innerHTML = '';
            
            selectedData.forEach((data, index) => {
                const color = selectedColors[index];
                const item = document.createElement('div');
                item.className = 'mb-4 last:mb-0';
                item.innerHTML = `<div class="flex items-center mb-2">
                                    <div class="w-4 h-4 rounded-full mr-2" style="background-color: ${color}"></div>
                                    <span class="font-medium">${data.name}</span>
                                 </div>
                                 <p class="pl-6 text-sm">${data.familySystem}</p>`;
                familySystemResult.appendChild(item);
            });
            
            // NLP与潜意识投射分析
            const nlpResult = document.getElementById('nlpResult');
            nlpResult.innerHTML = '';
            
            selectedData.forEach((data, index) => {
                const color = selectedColors[index];
                const item = document.createElement('div');
                item.className = 'mb-4 last:mb-0';
                item.innerHTML = `<div class="flex items-center mb-2">
                                    <div class="w-4 h-4 rounded-full mr-2" style="background-color: ${color}"></div>
                                    <span class="font-medium">${data.name}</span>
                                 </div>
                                 <p class="pl-6 text-sm">${data.nlp}</p>`;
                nlpResult.appendChild(item);
            });
            
            // 综合成长建议
            const suggestionResult = document.getElementById('suggestionResult');
            suggestionResult.innerHTML = '';
            
            // 生成综合建议（基于所选颜色的组合）
            const suggestions = generateSuggestions(selectedData);
            suggestions.forEach(suggestion => {
                const item = document.createElement('div');
                item.className = 'flex items-start';
                item.innerHTML = `<i class="fa fa-lightbulb-o text-blue-600 mt-1 mr-2"></i>
                                 <span>${suggestion}</span>`;
                suggestionResult.appendChild(item);
            });
        }

        // 生成综合建议
        function generateSuggestions(selectedData) {
            // 这里可以根据所选颜色的组合生成更个性化的建议
            // 简单示例：
            return [
                "基于你选择的色彩组合，建议你在日常生活中多关注自己的情绪变化，特别是在压力较大时给自己适当的休息和调整。",
                "你的色彩选择显示出你具有丰富的内心世界，尝试通过创意表达（如绘画、写作）来释放内心的情感和想法。",
                "在人际关系中，你可能倾向于" + (selectedData.some(d => d.personality.includes('善于沟通')) ? "主动表达" : "内敛观察") + "，找到适合自己的沟通方式将有助于建立更健康的关系。",
                "关注你所选色彩提示的健康领域，定期进行相关检查，保持身心平衡。",
                "考虑探索家族历史和传统对你当前生活的影响，这可能会帮助你更好地理解自己的行为模式和情感反应。"
            ];
        }

        // 重置按钮功能
        document.getElementById('resetBtn').addEventListener('click', () => {
            selectedColors.length = 0;
            updateSelectedColors();
            updateColorCards();
            analyzeBtn.classList.add('opacity-50', 'cursor-not-allowed');
            analyzeBtn.classList.remove('opacity-100', 'cursor-pointer');
            
            // 隐藏分析结果
            const analysisResults = document.getElementById('analysisResults');
            analysisResults.classList.add('hidden');
            
            // 重置分析卡片动画
            document.querySelectorAll('.analysis-card').forEach(card => {
                card.classList.remove('active');
            });
            
            // 滚动到顶部
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });

        // 帮助弹窗功能
        const helpBtn = document.getElementById('helpBtn');
        const helpModal = document.getElementById('helpModal');
        const closeHelpBtn = document.getElementById('closeHelpBtn');
        
        helpBtn.addEventListener('click', () => {
            helpModal.classList.remove('hidden');
        });
        
        closeHelpBtn.addEventListener('click', () => {
            helpModal.classList.add('hidden');
        });
        
        // 点击弹窗外部关闭
        helpModal.addEventListener('click', (e) => {
            if (e.target === helpModal) {
                helpModal.classList.add('hidden');
            }
        });

        // 分享弹窗功能
        const shareBtn = document.getElementById('shareBtn');
        const shareModal = document.getElementById('shareModal');
        const closeShareBtn = document.getElementById('closeShareBtn');
        const copyLinkBtn = document.getElementById('copyLinkBtn');
        
        shareBtn.addEventListener('click', () => {
            shareModal.classList.remove('hidden');
        });
        
        closeShareBtn.addEventListener('click', () => {
            shareModal.classList.add('hidden');
        });
        
        // 点击弹窗外部关闭
        shareModal.addEventListener('click', (e) => {
            if (e.target === shareModal) {
                shareModal.classList.add('hidden');
            }
        });
        
        // 复制链接功能
        copyLinkBtn.addEventListener('click', () => {
            const shareLink = document.getElementById('shareLink');
            shareLink.select();
            document.execCommand('copy');
            
            // 显示复制成功
            const originalText = copyLinkBtn.textContent;
            copyLinkBtn.textContent = '已复制';
            setTimeout(() => {
                copyLinkBtn.textContent = originalText;
            }, 2000);
        });
    </script>
</body>
</html>
